<!--
//
// Index.vue
// hs-admin
//
// Created by 区区电脑 on 2023/09/01.
//
-->
<template>
    <div class="Index">
        <table-search-bar :config="requestBodyConfig" :model="requestBody" title="系统缓存管理" @search="searchClicked" style="position: relative">
            <div class="buttons">
                <el-button @click="remove" type="danger" plain>清理当前</el-button>
                <el-button @click="removeAll" type="danger">清理全部</el-button>
            </div>
        </table-search-bar>
        <l-r-layout :left-width="350" :min="300" class="lr-container" :style="{height: `${containerH}px`}">
            <template #left>
                <div v-loading="!!state.loadingMessage" :element-loading-text="state.loadingMessage" class="key-list">
                    <div v-for="item in state.keyList" :key="item.id" :class="{key: true, current: state.currentKey === item}" @click="setKey(item)">
                        <span>{{ item }}</span>
                    </div>
                </div>
            </template>
            <template #right>
                <div v-loading="!!state.loadingValue" :element-loading-text="state.loadingValue" class="value-list">
                    <code>{{state.value}}</code>
                </div>
            </template>
        </l-r-layout>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import * as api from "./api.js"

const props = defineProps({});
const emits = defineEmits();

// 路由
const router = useRouter();
// store
const store = useStore();

const state = reactive({
    keyList: [],
    value: null,
    currentKey: null,
    loadingMessage: null,
    loadingValue: null
})

const containerH = computed(() => store.getters.containerHeight - 140)


// 请求body参数
const requestBody = reactive({
    key: null,
})
// 筛选区域配置
const requestBodyConfig = reactive({
    key: {label: "key", component: "el-input"},
})



function setKey(key) {
    state.currentKey = key;
    loadValue();
}

/**
 * 查询值
 */
async function loadValue() {
    state.loadingValue = "查询缓存"
    const {success, data} = await api.GetCacheValue({key: state.currentKey});
    state.loadingValue = null;
    if (!success) return 0;
    if (typeof data === "object") {
        state.value = JSON.stringify(data)
    } else {
        state.value = data;
    }

}

/**
 * 查询键列表
 */
async function loadKeyList() {
    state.loadingMessage = "查询缓存键"
    const {success, data} = await api.GetKeyList();
    state.loadingMessage = null;
    if (!success) return 0;
    state.keyList = (data || []).filter(key => requestBody.key ? key.indexOf(requestBody.key) > -1 : true);
    if (state.keyList[0]) {
        setKey(state.keyList[0])
    }
}


// 点击搜索
function searchClicked() {
    console.primary("搜索条件: ", requestBody)
    loadKeyList();
}

/**
 * 清理当前
 */
function remove() {
    api.DelCache({keys: [state.currentKey]}).then(({success}) => {
        if (success) {
            loadKeyList()
        }
    })
}

/**
 * 清理全部
 */
function removeAll() {
    api.DelCache({keys: state.keyList.map(key => key)}).then(({success}) => {
        if (success) {
            loadKeyList()
        }
    })
}


onMounted(() => {
    loadKeyList();
})
</script>

<style lang="scss" scoped>
.Index {
    margin: 10px;
    width: calc(100% - 20px);
    .buttons {
        position: absolute;
        right: 10px;
        bottom: 20px;
    }
    .lr-container {
        background: #fff;
        margin-top: 10px;
        box-sizing: border-box;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        .key-list {
            width: calc(100% - 10px);
            height: 100%;
            box-sizing: border-box;
            border-right: 1px solid rgba(0, 0, 0, 0.1);
            overflow: auto;
            .key {
                font-size: 16px;
                box-sizing: border-box;
                width: 100%;
                padding: 10px;
                color: #333;
                border-left: 2px solid #fff;
            }

            .current {
                color: var(--el-color-primary);
                background: var(--el-color-primary-light-9);
                border-left: 2px solid var(--el-color-primary);
            }
        }
        .value-list {
            width: calc(100% - 20px);
            height: calc(100% - 20px);
            background: rgba(0, 0, 0, 0.1);
            margin: 10px;
            border-radius: 10px;
            box-sizing: border-box;
            padding: 10px;
            color: #333;
            overflow: auto;
            white-space: pre-wrap;
            word-break: break-word;
        }
    }
}
</style>
